<template>
  <v-chart
    class="chart"
    :option="option"
    autoresize
    theme="dark"
    @click="clickE"
  />
</template>

<script setup>
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { PieChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
} from "echarts/components";
import VChart, { THEME_KEY } from "vue-echarts";
import { ref, defineExpose, defineProps } from "vue";
const clickE = (e) => {
  console.log(e);
};
use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
]);

const option = ref({
  title: {
    left: "center",
    top: 5,
  },
  tooltip: {
    trigger: "item",
    formatter: "{b} : {c} ({d}%)",
  },
  backgroundColor: "rgba(0, 0, 0, 0)",
  legend: {
    bottom: "0%",
    orient: "vertical",
    top: "56%",
    left: "center",

    textStyle: {
      color: "#fff",
      fontSize: "14px",
      marginRight: "90px",
    },
  },
  series: [],
});

const setData = (data) => {
  const richs = {};
  data.color.forEach((cl, index) => {
    richs["value" + index] = {
      width: 40,
      align: "right",
      color: cl,
      fontFamily: "Medium",
      fontSize: 14,
    };
  });
  const gap = data.total / 100;
  const gapData = {
    name: "",
    value: gap,
    itemStyle: {
      color: "transparent",
      borderWidth: 10,
    },
  };
  const sData = [];
  data.data.forEach((item, index) => {
    sData.push({
      ...item,
      itemStyle: {
        borderRadius: 100,
        color: data.color[index],
        borderWidth: 3,
        borderColor: "rgba(54,92,76)",
        // shadowBlur: 4,
        // shadowColor: data.color[index],
      },
    });
    // sData.push(gapData);
  });
  option.value = {
    title: {
      left: "center",
      top: 5,
    },
    tooltip: {
      trigger: "item",
      formatter: "{b} : {c} ({d}%)",
    },
    backgroundColor: "rgba(0, 0, 0, 0)",

    legend: {
      icon: "circle",
      itemWidth: 9,
      bottom: "0%",
      orient: "vertical",
      top: "56%",
      left: "center",
      border: 0,

      textStyle: {
        align: "left",
        verticalAlign: "middle",
        rich: {
          name: {
            width: 100,
            color: "#fff",
            fontSize: 14,
          },
          value: {
            width: 40,
            align: "left",
            color: "#",
            fontFamily: "Medium",
            fontSize: 15,
          },
          em: {
            width: 20,
            align: "right",
            color: "#00000000",
            fontFamily: "Medium",
            fontSize: 15,
          },
          ...richs,
        },
      },
      data: data.data,
      formatter: (name) => {
        if (data.data.length) {
          let index;
          let value;
          for (var i = 0, l = data.data.length; i < l; i++) {
            if (data.data[i].name == name) {
              value = data.data[i].value;
              index = i;
            }
          }
          return `{name|${name}}{value${index}| ${value}}{em|无}`;
        }
      },
    },
    series: [
      {
        name: "InsiderPieBorder",
        radius: ["38%", "42%"],
        center: ["50%", "28%"],
        type: "pie",
        tooltip: {
          show: false,
        },
        itemStyle: {
          normal: {
            color: "rgba(54,92,76)",
          },
        },
        avoidLabelOverlap: false,
        hoverAnimation: false,
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        label: {
          show: false,
        },
        detail: {
          show: false,
        },
        pointer: {
          show: false,
        },
        data: [
          {
            value: 0,
            label: {
              normal: {
                show: false,
              },
            },
            itemStyle: {
              emphasis: { show: false },
            },
          },
        ],
      },
      {
        name: "InsiderPieBorder",
        radius: ["50%", "55%"],
        center: ["50%", "28%"],
        type: "pie",
        tooltip: {
          show: false,
        },
        itemStyle: {
          normal: {
            color: "rgba(54,92,76)",
          },
        },
        avoidLabelOverlap: false,
        hoverAnimation: false,
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        label: {
          show: false,
        },
        detail: {
          show: false,
        },
        pointer: {
          show: false,
        },
        data: [
          {
            value: 0,
            label: {
              normal: {
                show: false,
              },
            },
            itemStyle: {
              emphasis: { show: false },
            },
          },
        ],
      },
      {
        name: "",
        type: "pie",
        radius: ["42%", "50%"],
        center: ["50%", "28%"],
        // data: data.data,
        data: sData,
        color: data.color,
        zLevel: 100,
        // itemStyle: {
        //   borderColor: "#343F36",
        //   borderWidth: 4,
        //   borderRadius: 100,
        // },
        labelLine: {
          show: false,
        },
        label: {
          normal: {
            show: true,
            position: "center",
            color: "#4c4a4a",
            formatter:
              "{total|" + data.total + "}" + "\n\r" + "{active|作业总数}",
            rich: {
              total: {
                fontSize: 32,
                fontFamily: "微软雅黑",
                color: "#31EFFB",
              },
              active: {
                fontFamily: "微软雅黑",
                fontSize: 14,
                color: "#ffffff",
                lineHeight: 30,
              },
            },
          },
          emphasis: {
            //中间文字显示
            show: true,
          },
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0)",
          },
        },
      },
    ],
  };
};
defineExpose({
  setData,
});
</script>
<style scoped>
.chart {
  height: 300px;
}
</style>
